<!-- 页面中的内容 -->

<div class="tab-div">
    <div id="tabbar-div">
        <p>
            <span class="tab-front">基本信息</span>
            <span class="tab-back">SEO信息</span>
            <span class="tab-back">商品描述</span>
            <span class="tab-back">会员价格</span>
            <span class="tab-back">商品属性</span>
            <span class="tab-back">商品相册</span>
        </p>
    </div>
    <div id="tabbody-div">
	    <form name="main_form" method="POST" action="{:url('add')}" enctype="multipart/form-data">
	        <!-- 基本信息 -->
	    	<table class="table_content" cellspacing="1" cellpadding="3" width="100%">
	            <tr>
	                <td class="label">商品名称：</td>
	                <td>
	                	<input type="text" name="goodName"/>
	                    <input type="checkbox" name="isStrong" value="1" />加粗
	                    <input type="checkbox" name="isItalic" value="1" />倾斜
	                    <input type="checkbox" name="isRed" value="1" />描红
	                </td>
	            </tr>
	            <tr>
	                <td class="label">商品分类：</td>
	                <td>
	                    <select name="cat_id">
			    			<option value="">选择分类</option>
			    			{volist name="cats" id="cat"}
			    				<option value="{$cat.cid}"><?php echo str_repeat('------',$cat['level']) ?>{$cat.cat_name}</option>
			    			{/volist}
			    		</select>
	                </td>
	            </tr>
	            <tr>
	                <td class="label">扩展分类：</td>
	                <td>
	                	<input onclick="$(this).parent().append($(this).next('select').clone());" type="button" value="添加" />
	                    <select name="ext_cat_id[]">
	                    	<option value="">选择分类</option>
			    			{volist name="cats" id="cat"}
			    				<option value="{$cat.cid}"><?php echo str_repeat('------',$cat['level']) ?>{$cat.cat_name}</option>
			    			{/volist}
	                    </select>
	                </td>
	            </tr>
	            <tr>
	                <td class="label">品牌：</td>
	                <td>
	                    <select name="brand_id">
			    			<option value="">选择品牌</option>
			    			{volist name="brands" id="brand"}
			    				<option value="{$brand.bid}">{$brand.brand_name}</option>
			    			{/volist}
			    		</select>
	                </td>
	            </tr>
	            <tr>
	                <td class="label">市场价：</td>
	                <td>
	                    ￥ <input  type="text" size="10" name="marketPrice" value="0.00" /> 元
	                </td>
	            </tr>
	            <tr>
	                <td class="label">本店价：</td>
	                <td>
	                    ￥ <input  type="text" size="10" name="shopPrice" value="0.00" /> 元
	                </td>
	            </tr>
	            <tr>
	                <td class="label">是否促销：</td>
	                <td>
	                    <input value="1" name="promote"  type="checkbox" />促销
	                </td>
	            </tr>
	            <tr style="display: none;">
	                <td class="label">促销价：</td>
	                <td>
	                    <input class="promote_price" disabled="disabled" type="text" name="promote_price" value="0.00" />
	                </td>
	            </tr>
	            <tr  style="display: none;">
	                <td class="label">促销开始时间：</td>
	                <td>
	                    <input class="promote_price date" disabled="disabled" id="promote_start_time" type="text" name="start_time" />
	                </td>
	            </tr>
	            <tr  style="display: none;">
	                <td class="label">促销结束时间：</td>
	                <td>
	                    <input class="promote_price date" disabled="disabled" id="promote_end_time" type="text" name="end_time" />
	                </td>
	            </tr>
	            <tr>
	                <td class="label">赠送积分：</td>
	                <td>
	                    <input  type="text" name="jf" value="0" />
	                    如果不填和商品价格相同
	                </td>
	            </tr>
	            <tr>
	                <td class="label">赠送经验值：</td>
	                <td>
	                    <input  type="text" name="jingyan" value="0" />
	                    如果不填和商品价格相同
	                </td>
	            </tr>
	            <tr>
	                <td class="label">如果要用积分兑换，需要的积分数：</td>
	                <td>
	                    <input  type="text" name="jifenPrice" value="0" />
	                    如果不填代表不能使用积分兑换
	                </td>
	            </tr>
	            <tr>
	                <td class="label">logo原图：</td>
	                <td>
	                	<input type="file" name="logo" id="logo" /> 
	                	<input type="hidden" name="logo_small" value="" /> 
	                	<input type="hidden" name="logo_medium" value="" /> 
	                	<input type="hidden" name="logo_big" value="" /> 
	                </td>
	            </tr>
	            <tr style="display: none;">
	                <td class="label">缩略图展示：</td>
	                <td style="position: relative;display: inline-block;">
	                    <img class="picShow" src="" width="115" alt="" style="border: 1px solid #aaa;" >
	                    <a title="删除图片" class="del_logo" href="javascript:;" style="position: absolute;right: 1px;top: 0px;width: 16px;height: 20px;font-size: 20px;text-decoration: none;">×</a>
	                </td>
	            </tr>	
	            <tr>
	                <td class="label">是否上架：</td>
	                <td>
	                	<input type="radio" name="isSale" value="1" checked="checked" />上架 
	                	<input type="radio" name="isSale" value="0"  />下架 
	                </td>
	            </tr>
	            <tr>
	                <td class="label">是否热卖：</td>
	                <td>
	                	<input type="radio" name="isHot" value="1"  />是 
	                	<input type="radio" name="isHot" value="0" checked="checked" />否 
	                </td>
	            </tr>
	            <tr>
	                <td class="label">是否新品：</td>
	                <td>
	                	<input type="radio" name="isNew" value="1"  />是 
	                	<input type="radio" name="isNew" value="0" checked="checked" />否 
	                </td>
	            </tr>
	            <tr>
	                <td class="label">是否精品：</td>
	                <td>
	                	<input type="radio" name="isBest" value="1"  />是 
	                	<input type="radio" name="isBest" value="0" checked="checked" />否 
	                </td>
	            </tr>
	            <tr>
	                <td class="label">商品单位：</td>
	                <td>
	                    <input size="5" type="text" name="unit" value="部" style="text-align: center;" /><span style="color:#999">（件、台等）</span>
	                </td>
	            </tr>
	            <tr>
	                <td class="label">点击次数：</td>
	                <td>
	                    <input size="5" type="text" name="view" value="0" style="text-align: center;" />
	                </td>
	            </tr>
	            <tr>
	                <td class="label">排序数字：</td>
	                <td>
	                    <input size="5" type="text" name="sort" value="0" style="text-align: center;" />
	                </td>
	            </tr>
	        </table>
	        <!-- SEO信息 -->
	        <table class="table_content" cellspacing="1" cellpadding="3" width="100%" style="display:none;">
	        	<tr>
	                <td class="label">seo优化_关键字：</td>
	                <td>
	                	<textarea name="seoKeyword" id="" cols="80" rows="10"></textarea>
	                </td>
	            </tr>
	            <tr>
	                <td class="label">seo优化_描述：</td>
	                <td>
	                    <textarea name="seoDescription" id="" cols="80" rows="10"></textarea>
	                </td>
	            </tr>
	        </table>
	        <!-- 描述 -->
	    	<table class="table_content" cellspacing="1" cellpadding="3" width="100%" style="display:none;">
	            <tr>
	            	<td>
	                	<!-- 加载编辑器的容器 -->
						<script id="container" name="content" type="text/plain">
						   <!--  这里写你的初始化内容 -->
						</script>
	                </td>
	            </tr>
	    	</table>
	    	<!-- 会员价格 -->
	    	<table class="table_content" cellspacing="1" cellpadding="3" width="100%" style="display:none;">
	    		<tr>
	    			<td style="font-size:18px;font-weight:bold;">会员价格（如果没有填会员价格就按折扣率计算价格，如果填了就按填的价格算，不再打折）</td>
	    		</tr>
	    		{volist name="members" id="member"}
		    		<tr>
		    			<td>{$member.level_name}（{if condition="$member['rate']/10 == 10"}无折扣{else /}{$member.rate/10}折{/if} ） ： 
		    				￥ <input type="text" size="10" name="memPrice[{$member.lid}]" /> 元
		    			</td>
		    		</tr>
	    		{/volist}
	    	</table>
	    	<!-- 属性 -->
	    	<table class="table_content" cellspacing="1" cellpadding="3" width="100%" style="display:none;">
	    		<tr><td>
	    		商品类型：<select name="type_id">
			    			<option value="">选择类型</option>
			    			{volist name="types" id="type"}
			    				<option value="{$type.tid}">{$type.type_name}</option>
			    			{/volist}
			    		</select>
	    		</td></tr>
	    		<tr><td id="attr_container"></td></tr>
	    	</table>
	    	<!-- 相册 -->
	    	<table class="table_content" cellspacing="1" cellpadding="3" width="100%" style="display:none;">
	    		<tr>
	    			<td>
	    				<input type="file" name="pics" id="pics" value="上传图片" multiple="multiple" /><span style="color:#999;">（可选择多张图片！）</span>
	    			</td>
	    		</tr>
	    	</table>
	    	<table cellspacing="1" cellpadding="3" width="100%">
	    		<tr>
	                <td align="center">
	                    <input type="submit" class="button" value=" 确定 " />
	                    <input type="reset" class="button" value=" 重置 " />
	                </td>
	            </tr>
	    	</table>
	    </form>
	</div>
</div>
<link rel="stylesheet" href="__PUBLIC__/plugin/uploadify/uploadify.css">
<style>
    #logo-button,#pics-button{
        border-radius: 0;
        border:0 none;
    }
</style>
<script src="__PUBLIC__/plugin/uploadify/jquery.uploadify.min.js"></script>
<script src="__PUBLIC__/plugin/My97DatePicker/WdatePicker.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/plugin/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/plugin/ueditor/ueditor.all.js"></script>    

<script>
// 点击按钮切换table
$("div#tabbar-div p span").click(function(){
	// 获取点击的是第几个按钮
	var i = $(this).index();

	// 显示第i个table
	$(".table_content").eq(i).show();

	// 隐藏其他的table
	$(".table_content").eq(i).siblings(".table_content").hide();

	// 把原来选中的取消选中状态
	$(".tab-front").removeClass("tab-front").addClass("tab-back");

	// 切换点击的按钮的样式为选中状态
	$(this).removeClass("tab-back").addClass("tab-front");
});

//是否促销
if($('input[name=promote]').attr('checked')) {

	$('.promote_price').removeAttr('disabled').parents('tr').show(); 

}
$('input[name=promote]').click(function(event) {
	
	if($(this).attr('checked')) {

		$('.promote_price').removeAttr('disabled').parents('tr').show(); 

	}else{

		$('.promote_price').attr('disabled', 'disabled').parents('tr').hide();
	}
});

//上传logo图
var uploadImg = $("input[name=uploadImg]");
var pics = null;
$('#logo').uploadify({
		swf           : '__PUBLIC__/plugin/uploadify/uploadify.swf',
        uploader      : "{:url('uploadLogo')}",
        width         : 80,
        height        : 24,
        fileExt       :'*.gif;*.jpg;*.jpeg;*.png',
        buttonImage   : '__PUBLIC__/plugin/uploadify/upload.png',
        cancelImg : '__PUBLIC__/plugin/uploadify//uploadify-cancel.png',          
        onUploadSuccess:function(file, data, response){
			
			if( data ){

				//json字符串转对象
				pics = $.parseJSON( data );

				//将缩略图路径赋值给隐藏域
			    $('input[name=logo_small]').val(pics['img_small']);
			    $('input[name=logo_medium]').val(pics['img_medium']);
			    $('input[name=logo_big]').val(pics['img_big']);

			    //显示缩略图
			    $('.picShow').attr('src',pics['img_small']).parents('tr').show();

			}
            
        }
});

//删除展示图
$('.del_logo').click(function() {
    var url = "{:url('delPics')}";
    var _this = this;
    var imgPath = [];
 	
 	//获取删除图片路径
    $(this).parents('tr').prev().find('input').each(function() {
    	imgPath.push($(this).val());
    });

    $.get(url,{path:imgPath},function( data ) {

        if( data ){

            $(_this).parents('tr').fadeOut('slow', function() {

                uploadImg.val('');
                $(_this).prev('img').attr('src','');
                
            });

        }

    },'json');
});

//点击日期框弹窗日历
$('.date').click(function() {
	WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',startDate:'%y-%M-%d 00:00:00'});
});

// 实例化编辑器
var ue = UE.getEditor('container',{
	autoHeightEnabled: false,
	initialFrameHeight:400,
});

//上传商品相册
var queue = null;
var str = '';
var index = 0;
$('#pics').uploadify({
		swf           : '__PUBLIC__/plugin/uploadify/uploadify.swf',
        uploader      : "{:url('uploadLogo')}",
        width         : 80,
        height        : 24,
        multi         : true,
        fileExt       :'*.gif;*.jpg;*.jpeg;*.png',
        buttonImage   : '__PUBLIC__/plugin/uploadify/upload.png',
        cancelImg : '__PUBLIC__/plugin/uploadify//uploadify-cancel.png',          
        onUploadSuccess:function(file, data, response){
			
			if( data ){

				//json字符串转对象
				pics = $.parseJSON( data );

				//将缩略图路径赋值给隐藏域
				
				str += '<div style="position: relative;display: inline-block;margin:10px 10px 0 0;">';
	                    str +='<img src="'+pics["img_medium"]+'" width="200" alt="" style="border: 1px solid #aaa;" >'
	                    str +='<a title="删除图片" class="del_pics" href="javascript:;" style="position: absolute;right: 1px;top: 0px;width: 16px;height: 20px;font-size: 20px;text-decoration: none;">×</a>';
	                    str += '<br /><input name="pics['+index+'][sort]" value="'+(index+1)+'" style="width:30px;text-align:center;margin: 3px 0 0 80px;" />';
	                    str +='<input type="hidden" name="pics['+index+'][img_small]" value="'+pics["img_small"]+'" />';
                		str +='<input type="hidden" name="pics['+index+'][img_medium]" value="'+pics["img_medium"]+'" />';
	            		str +='<input type="hidden" name="pics['+index+'][img_big]" value="'+pics["img_big"]+'" /> ';
                str +='</div>';
				
                index++;
			}
            
        },
        onQueueComplete(queueData){		

        	//显示缩略图
			$('#pics-queue').append(str);
			
			//情况str
			str = '';
        }
});

//删除商品相册
$('.del_pics').live('click',function() {
	
    var url = "{:url('delPics')}";
    var _this = this;
    var imgPath = [];
 
    $(this).nextAll('input').each(function() {
    	imgPath.push($(this).val());
    });
    
    $.get(url,{path:imgPath},function( data ) {
        if( data ){

            $(_this).parent('div').fadeOut('slow', function() {

        
                $(this).remove();
                
            });

        }
    });
});


// 当选择类型时执行AJAX取出类型的属性
var tid = 0;
var oTd = $('#attr_container');
$("select[name=type_id]").change(function() {

	if( !$(this).val()) {
		oTd.html('');
	}
	
	url = "{:url('getTypeAttrs')}";
	tid = $(this).val();
	$.get(url,{id:tid},function( data ) {

		if( data.status ) {

			var attrs =  data['msg'];
			
			var len = attrs.length;
			
			for ( var i=0; i < len; i++ ) {

				//属性名
				str += '<p>';
				str += attrs[i]['attr_name']+' : ';

				//下拉列表
				if( attrs[i]['input_type'] ==1 ){
					str += attrs[i]['attr_type'] ? '<a href="javascript:;" class="attr_btn"> [+] </a>' : '';
					str += attrs[i]['attr_type'] ? '' : '<input type="text" name="attrs['+attrs[i]['aid']+']" />';
					var name = attrs[i]['attr_type'] ? 'name="attrs['+attrs[i]['aid']+'][]"': '';
					var classname = attrs[i]['attr_type'] ? '': 'class="add_attr_value"';
					str +=' <select '+name+' '+classname+'>';
						str +='<option value="">请选择</option>';
						var attrValue = attrs[i]['attr_value'].split(',');
						var aLen = attrValue.length;
						for (var j = 0; j < aLen; j++) {
							
							str +='<option value="'+attrValue[j]+'">'+attrValue[j]+'</option>';
							
						}
					str +='</select>';
					str += attrs[i]['attr_type'] ? '' : '<span style="color:#999;">（可在下拉框中选择，也可以在文本框中直接输入！）</span>';
				}
				//文本域
				else if(attrs[i]['input_type'] == 2){

					str += '<textarea style="vertical-align:middle;" name="attrs['+attrs[i]['aid']+']" rows="6" columns="30"></textarea><span style="color:#999;">(关键字可用英文状态下的逗号","隔开)</span>';

				}
				//手动输入
				else{
					str += attrs[i]['attr_type'] ? '<a href="javascript:;" class="attr_btn"> [+] </a>' : '';
					var name = attrs[i]['attr_type'] ? 'name="attrs['+attrs[i]['aid']+'][]"' : 'name="attrs['+attrs[i]['aid']+']"';
					str += '<input type="text" '+name+' />'
				}			

			}

			//清空后追加内容
			oTd.html('').append(str);
			
		}else{
			oTd.html('');
		}

		str = '';

	},'json');

});
//验证出错后，自动触发change事件
$("select[name=type_id]").trigger('change');

//选中属性下拉框，将值放入文本框
var selectValue = '';
var attrValue = '';
var appendValue = '';
var validateValue = '';
$('.add_attr_value').live('change',function(){

	//获取选中的值
	selectValue = $(this).val();

	//判断是否为空
	if( selectValue == '' ){
		
		return false;
	}

	//获取属性值
	attrValue = $(this).prev().val();

	//待验证的字符串
	validateValue = ','+attrValue+',';

	//判断是否前面已经添加过此值
	var re =new RegExp(','+selectValue+',');

	if(  validateValue.match(re) != null  ){
		
		return false;
	}

	//追加值
	if( attrValue ){

		//如果前面已经有值就加一个','分割
		appendValue = attrValue+','+selectValue;

	}else{

		//如果之前没有值就直接赋值即可
		appendValue = selectValue;

	}

	//将获取到的值追加到属性值中
	$(this).prev().val( appendValue );

	
});

// 点击+号
$('.attr_btn').live('click',function(){

	// 选中a标签所在的p标签
	var p = $(this).parent();
	// 先获取A标签中的内容
	if($(this).html().trim() == "[+]")
	{
		// 把p克隆一份
		var newP = p.clone();
		// 把克隆出来的P里面的a标签变成-号
		newP.find("a").html("[-]");
		// 放在后面
		p.after(newP);
	}
	else
		p.remove();

});


</script>